<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="角色名称"
        >
          <a-input
            placeholder="请输入角色名称"
            v-decorator.trim="[
              'roleName',
              {
                rules: validatorRules.roleName.rules,
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/[^\u4e00-\u9fa5]/g, '');
                },
              },
            ]"
          />
        </a-form-item>

        <!-- 角色编码 -->
        <!-- <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="角色编码"
        >
          <a-input
            placeholder="请输入角色编码"
            :disabled="roleDisabled"
            v-decorator.trim="[
              'roleCode',
              {
                rules: validatorRules.roleCode.rules,
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/[^\w\.\/]/gi, '');
                },
              },
            ]"
          />
        </a-form-item> -->
        <!--        <a-form-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--          <a-tree-select style="width:100%" :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }" :replaceFields="{children:'children', title:'deptName'}"-->
        <!--          :treeData="treeData" placeholder="请选择部门" :defaultExpandAll="true" v-decorator.trim="[ 'deptId', validatorRules.deptId]">-->
        <!--          </a-tree-select>-->
        <!--        </a-form-item>-->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
          <a-textarea
            :rows="5"
            placeholder="..."
            v-decorator="['description', validatorRules.description]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from "lodash.pick";
import { addRole, editRole, queryIdTree } from "@/api/api";
import { getAction } from "@api/manage";

export default {
  name: "RoleModal",
  data() {
    return {
      title: "操作",
      visible: false,
      roleDisabled: false,
      model: {},
      treeData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        roleName: {
          rules: [
            { required: true, message: "请输入角色名称!" },
            {
              min: 2,
              max: 30,
              message: "长度在 2 到 30 个字符",
              trigger: "blur",
            },
          ],
        },
        // roleCode: {
        //   rules: [
        //     { required: true, message: "请输入角色名称!" },
        //     {
        //       min: 0,
        //       max: 64,
        //       message: "长度不超过 64 个字符",
        //       trigger: "blur",
        //     },
        //     { validator: this.validateRoleCode },
        //   ],
        // },
        description: {
          rules: [
            {
              min: 0,
              max: 126,
              message: "长度不超过 126 个字符",
              trigger: "blur",
            },
          ],
        },
        deptId: {
          rules: [
            {
              // required: true,
              message: "请选择机构",
            },
          ],
        },
      },
    };
  },
  created() {},
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.initTreeData();
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;

      //编辑页面禁止修改角色编码
      if (this.model.roleId) {
        this.roleDisabled = true;
        let that = this;
        getAction("/sys/role/info/" + that.model.roleId).then((res) => {
          if (res.code == "00000") {
            that.$nextTick(() => {
              that.form.setFieldsValue(
                pick(res.data, "roleName", "description", "deptId")
              );
            });
          } else {
            that.$message.warning("查询失败");
          }
        });
      } else {
        this.roleDisabled = false;
        this.$nextTick(() => {
          this.form.setFieldsValue(
            pick(this.model, "roleName", "description", "deptId")
          );
        });
      }
    },
    initTreeData() {
      let that = this;
      queryIdTree().then((res) => {
        if (res.code == "00000") {
          that.treeData = res.data;
        }
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          let obj;
          console.log(formData);
          if (!this.model.roleId) {
            obj = addRole(formData);
          } else {
            obj = editRole(formData);
          }
          obj
            .then((res) => {
              if (res.code == "00000") {
                that.$message.success("操作成功");
                that.$emit("ok");
              } else {
                that.$message.warning("操作失败" + res.msg);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    validateRoleCode(rule, value, callback) {
      if (/[\u4E00-\u9FA5]/g.test(value)) {
        callback("角色编码不可输入汉字!");
      } else {
        callback();
      }
    },
  },
};
</script>

<style scoped>
</style>